<template>
  <div>
    <div>
      <van-nav-bar title="黑马头条 - 登录" />
    </div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="mobile"
        name="mobile"
        label="手机号码"
        placeholder="手机号码"
        required

        :rules="[{ required: true, message: '请填写手机号码',trigger:'onChange',pattern:/^1[3456789]\d{9}$/ }]"
      />
      <van-field
        v-model="code"
        type="password"
        name="code"
        label="密码"
        placeholder="密码"
        required
        :rules="[{ required: true, message: '请填写密码',trigger:'onChange',pattern:/^\d{6}$/ }]"
      />
      <div style="margin: 16px">
        <van-button :disabled="isshow" round block type="info" :loading="isshow"  loading-text="加载中..." native-type="submit"
          >登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { LoginAPI } from '@/api'
import { Notify } from 'vant'
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      mobile: '13900012121',
      code: '246810',
      isshow: false
    }
  },
  methods: {
    ...mapMutations(['setToken', 'setrefreshToken']),
    // 登录发起请求
    async onSubmit (values) {
      this.isshow = true
      const [err, res] = await LoginAPI(values)
      if (err) {
        // console.log(123)
        Notify({ type: 'warning', message: '手机号或密码错误' })
      } else {
        // console.log(res)
        Notify({ type: 'success', message: '登录成功' })
        this.setToken(res.data.data.token)
        this.setrefreshToken(res.data.data.refresh_token)
        this.$router.push({
          path: '/layout'
        })
      }
      this.isshow = false
    }
  }
}
</script>

<style>
</style>
